<template>
  <div>
    <div class="head-bg">
      <el-image :src="headBg" fit="cover"></el-image>
    </div>
    <div class="content-container">
      <div class="content">
        <div class="search-container">
          <div class="search-box ">
            <el-input
              placeholder="请输入标题"
              @keyup.enter.native="getList(1)"
              v-model="queryParams.title"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <span class="search-btn" slot="append" @click="getList(1)">
                搜索
              </span>
            </el-input>
            <el-button
              :disabled="isCanReset"
              type="primary"
              class="ml-4"
              @click="resetSearch"
            >
              重置搜索
            </el-button>
          </div>
        </div>
        <DashLine />
        <div class="screen-container">
          <RouterSelectStrip
            :active-id.sync="queryParams.typeId"
            :screenList="achTypeList"
            label="成果类型"
            @itemClick="achieveTypeItemClick"
          />

          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.phaseId"
            :screenList="achStepTypeList"
            label="成果阶段"
            @itemClick="achieveStepItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.fieldId"
            :screenList="positionList"
            label="行业分类"
            @itemClick="positionItemClick"
          />
        </div>

        <div
          v-loading="listLoading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          class="info-list"
        >
          <div
            v-for="item in list"
            :key="item.id"
            class="item"
            @click="handleItemClick(item)"
          >
            <div class="img-container">
              <el-image fit="cover" :src="item.picture"></el-image>
            </div>
            <div class="title">{{ item.title }}</div>
            <div>
              <div class="sub">
                <span class="label"> 所属行业: </span>
                <span class="content">
                  {{ filedDictName(item.fieldId) }}
                </span>
              </div>

              <div class="sub">
                <span class="label"> 成果阶段: </span>
                <span class="content">
                  {{ achStepName(item.phaseId) }}
                </span>
              </div>

              <div class="sub">
                <span class="label"> 所在区域: </span>
                <span class="content"> {{ item.address }} </span>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="list.length <= 0"
          class="pb-8 m-auto text-xl text-center text-gray-500"
        >
          暂无数据
        </div>
        <pagination
          v-show="tableTotal > 0"
          :autoScroll="true"
          :total="tableTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :pageSizes="[10, 12, 20, 30, 40]"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import RouterSelectStrip from '@/components/HeadScreenStrip/RouterSelectStrip.vue'
import { getAchievementsList } from '@/api/techAchievements'
export default {
  name: 'techAchievements',
  components: {
    RouterSelectStrip,
  },
  data() {
    return {
      headBg: require('@/assets/page-head/tech-achievement.png'),

      achStepDictName: 'achievements_achievement_stage',
      // 成果阶段
      achStepTypeList: [],
      positionDictName: 'user_common_field',
      // 行业类型
      positionList: [],
      achTypeDictName: 'achievements_achievement_type',
      // 成果类型
      achTypeList: [],

      listLoading: false,
      tableTotal: 1,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        title: undefined,
        fieldId: undefined,
        phaseId: undefined,
        typeId: undefined,
      },
    }
  },
  computed: {
    isCanReset() {
      let query = this.queryParams
      let { title, fieldId, phaseId, typeId } = query
      return !title && !fieldId && !phaseId && !typeId
    },
    filedDictName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.positionList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
    achStepName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.achStepTypeList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        return findItem && findItem['dictLabel'] ? findItem['dictLabel'] : '无'
      }
    },
    achTypeName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.achTypeList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )

        return findItem && findItem['dictLabel'] ? findItem['dictLabel'] : '无'
      }
    },
  },
  watch: {
    '$route.query': {
      handler(v) {
        this.startRequest(v)
      },
    },
  },
  created() {
    // this.getList()
    this.startRequest()
    this.initDictList()
  },
  methods: {
    initDictList() {
      this.getDictList(this.achStepDictName).then((res) => {
        if (res.code == 200) {
          this.achStepTypeList = res.data
        }
      })
      this.getDictList(this.positionDictName).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data
        }
      })
      this.getDictList(this.achTypeDictName).then((res) => {
        if (res.code == 200) {
          this.achTypeList = res.data
        }
      })
    },
    positionItemClick(activeItem) {
      // this.queryParams.fieldId = activeItem.dictValue
      this.getList(1)
    },
    achieveTypeItemClick(activeItem) {
      // this.queryParams.typeId = activeItem.dictValue
      this.getList(1)
    },
    achieveStepItemClick(activeItem) {
      // this.queryParams.phaseId = activeItem.dictValue
      this.getList(1)
    },
    handleItemClick(item) {
      let id = item.id
      this.$router.push({ name: 'techAchievementDetail', params: { id } })
    },
    resetSearch() {
      this.queryParams.title = undefined
      this.queryParams.fieldId = undefined
      this.queryParams.phaseId = undefined
      this.queryParams.typeId = undefined
      this.getList(1)
    },
    //
    getList(isRestSearch) {
      if (isRestSearch == 1) {
        this.queryParams.pageNum = 1
      }
      let { pageNum, title, fieldId, phaseId, typeId } = this.queryParams

      this.$router.push({
        path: '/techSource/techAchievements',
        query: {
          pN: pageNum,
          tt: title,
          fId: fieldId,
          pId: phaseId,
          tId: typeId,
        },
      })
    },
    // 整理 请求参数
    // 将 router 中 筛选参数  与 本地参数 结合
    manageQuery(sourceQuery) {
      let { pN, tt, fId, pId, tId } = this.$route.query
      pN = pN && parseInt(pN) ? parseInt(pN) : 1
      let queryParams = {
        pageNum: pN,
        title: tt,
        fieldId: fId,
        phaseId: pId,
        typeId: tId,
      }
      if (sourceQuery && sourceQuery.pageNum) {
        queryParams = sourceQuery
      }
      queryParams = { ...this.queryParams, ...queryParams }
      this.listLoading = true
      if (!queryParams || !queryParams?.pageSize || !queryParams?.pageNum) {
        this.$message({
          type: 'error',
          message: '搜索条件出错',
        })

        this.listLoading = false
        return
      }
      for (const key in queryParams) {
        if (Object.hasOwnProperty.call(queryParams, key)) {
          const element = queryParams[key]
          this.queryParams[key] = element
        }
      }
      return queryParams
    },
    // 发起数据列表请求
    startRequest(sourceQuery) {
      // let { pN, tt, fId, pId, tId } = this.$route.query
      // pN = pN && parseInt(pN) ? parseInt(pN) : 1
      // let queryParams = {
      //   pageNum: pN,
      //   title: tt,
      //   fieldId: fId,
      //   phaseId: pId,
      //   typeId: tId,
      // }
      // if (sourceQuery && sourceQuery.pageNum) {
      //   queryParams = sourceQuery
      // }
      // queryParams = { ...this.queryParams, ...queryParams }
      // this.listLoading = true
      // if (!queryParams || !queryParams?.pageSize || !queryParams?.pageNum) {
      //   this.$message({
      //     type: 'error',
      //     message: '搜索条件出错',
      //   })
      //   this.listLoading = false
      //   return
      // }
      // for (const key in queryParams) {
      //   if (Object.hasOwnProperty.call(queryParams, key)) {
      //     const element = queryParams[key]
      //     this.queryParams[key] = element
      //   }
      // }
      let queryParams = this.manageQuery(sourceQuery)
      getAchievementsList(queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.list = res.rows
            this.tableTotal = res.total
          }
        })
        .finally(() => {
          this.listLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.content-container {
  & > .content {
    width: 1200px;
    margin: auto;

    .screen-container {
      background-color: #f6f9ff;
    }
    .search-container {
      display: flex;
      align-items: center;
      padding: 1rem;
      margin-top: 25px;
      background-color: #f6f9ff;

      .search-box {
        display: flex;
        width: 560px;
        ::v-deep .el-input-group__append {
          background-color: #409eff;
          cursor: pointer;
        }
        .search-btn {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
    .info-list {
      display: grid;
      grid-row-gap: 2px;
      grid-column-gap: 0.2%;
      grid-template-columns: 25% 25% 25% 25%;

      // display: flex;
      // flex-flow: row wrap;
      width: 100%;
      margin: 25px 0;

      .item {
        width: 289px;
        height: 344px;
        border: 1px solid #efefef;
        border-radius: 5px;
        margin-bottom: 20px;
        cursor: pointer;
        box-shadow: 0px 3px 5px #d1d9e6, 0px -3px 5px #fff;

        .img-container {
          width: 289px;
          height: 180px;
          border-radius: 5px 5px 0 0;

          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 5px 5px 0 0;
          }
        }
        .title {
          width: 279px;
          padding: 0 10px;
          height: 2.5rem;
          line-height: 2.5rem;
          margin: 5px 0;
          font-size: 18px;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
          color: #000000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .sub {
          height: 2.5rem;
          line-height: 2.5rem;
          padding: 0 10px;
          overflow: hidden;
          .label {
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            color: #999;
          }
          .content {
            margin-left: 4px;
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            color: #000000;
          }
        }
      }
    }
  }
}
</style>
